<template>
  <div class="patient-test-page">
    <h2>就诊人管理功能测试</h2>
    
    <div class="test-section">
      <h3>就诊人列表查询测试</h3>
      <van-button @click="testGetPatients" :loading="testingPatients">
        {{ testingPatients ? '测试中...' : '测试获取就诊人列表' }}
      </van-button>
      <div v-if="patientsResult" class="result">
        <p><strong>状态:</strong> {{ patientsResult.status }}</p>
        <p><strong>消息:</strong> {{ patientsResult.message }}</p>
        <pre v-if="patientsResult.data">{{ JSON.stringify(patientsResult.data, null, 2) }}</pre>
      </div>
    </div>

    <div class="test-section">
      <h3>就诊人详情查询测试</h3>
      <van-field
        v-model="testPatientId"
        label="就诊人ID"
        placeholder="请输入就诊人ID"
        type="number"
      />
      <van-button @click="testGetPatientById" :loading="testingPatientDetail">
        {{ testingPatientDetail ? '测试中...' : '测试获取就诊人详情' }}
      </van-button>
      <div v-if="patientDetailResult" class="result">
        <p><strong>状态:</strong> {{ patientDetailResult.status }}</p>
        <p><strong>消息:</strong> {{ patientDetailResult.message }}</p>
        <pre v-if="patientDetailResult.data">{{ JSON.stringify(patientDetailResult.data, null, 2) }}</pre>
      </div>
    </div>

    <div class="test-section">
      <h3>添加就诊人测试</h3>
      <van-form @submit="testAddPatient">
        <van-cell-group inset>
          <van-field
            v-model="testForm.relationship"
            name="relationship"
            label="关系"
            placeholder="请输入关系"
            :rules="[{ required: true, message: '请输入关系' }]"
          />
          <van-field
            v-model="testForm.name"
            name="name"
            label="姓名"
            placeholder="请输入姓名"
            :rules="[{ required: true, message: '请输入姓名' }]"
          />
          <van-field
            v-model="testForm.idCardType"
            name="idCardType"
            label="证件类型"
            placeholder="请输入证件类型"
            :rules="[{ required: true, message: '请输入证件类型' }]"
          />
          <van-field
            v-model="testForm.idCardNum"
            name="idCardNum"
            label="证件号码"
            placeholder="请输入证件号码"
            :rules="[{ required: true, message: '请输入证件号码' }]"
          />
          <van-field
            v-model="testForm.medicalCard"
            name="medicalCard"
            label="就诊卡号"
            placeholder="请输入就诊卡号"
            :rules="[{ required: true, message: '请输入就诊卡号' }]"
          />
          <van-field
            v-model="testForm.phone"
            name="phone"
            label="手机号码"
            placeholder="请输入手机号码"
            :rules="[{ required: true, message: '请输入手机号码' }]"
          />
          <van-field
            v-model="testForm.address"
            name="address"
            label="地址"
            placeholder="请输入地址"
          />
        </van-cell-group>
        <van-button type="primary" native-type="submit" :loading="testingAdd" block>
          {{ testingAdd ? '添加中...' : '测试添加就诊人' }}
        </van-button>
      </van-form>
      <div v-if="addResult" class="result">
        <p><strong>状态:</strong> {{ addResult.status }}</p>
        <p><strong>消息:</strong> {{ addResult.message }}</p>
        <pre v-if="addResult.data">{{ JSON.stringify(addResult.data, null, 2) }}</pre>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { Toast } from 'vant'
import { api, type PatientForm } from '@/api'

const testingPatients = ref(false)
const testingPatientDetail = ref(false)
const testingAdd = ref(false)
const testPatientId = ref(1)

const patientsResult = ref<any>(null)
const patientDetailResult = ref<any>(null)
const addResult = ref<any>(null)

const testForm = reactive<PatientForm>({
  relationship: '本人',
  name: '测试用户',
  idCardType: '身份证',
  idCardNum: '123456789012345678',
  medicalCard: '20250101001',
  phone: '13800138000',
  address: '测试地址',
  isDefault: false
})

// 测试获取就诊人列表
const testGetPatients = async () => {
  testingPatients.value = true
  patientsResult.value = null
  
  try {
    const response = await api.getPatients()
    patientsResult.value = {
      status: '成功',
      message: '获取就诊人列表成功',
      data: response.data
    }
    Toast('获取就诊人列表成功')
  } catch (error) {
    console.error('获取就诊人列表失败:', error)
    patientsResult.value = {
      status: '失败',
      message: error instanceof Error ? error.message : '未知错误',
      data: null
    }
    Toast('获取就诊人列表失败')
  } finally {
    testingPatients.value = false
  }
}

// 测试获取就诊人详情
const testGetPatientById = async () => {
  if (!testPatientId.value) {
    Toast('请输入就诊人ID')
    return
  }
  
  testingPatientDetail.value = true
  patientDetailResult.value = null
  
  try {
    const response = await api.getPatientById(testPatientId.value)
    patientDetailResult.value = {
      status: '成功',
      message: '获取就诊人详情成功',
      data: response.data
    }
    Toast('获取就诊人详情成功')
  } catch (error) {
    console.error('获取就诊人详情失败:', error)
    patientDetailResult.value = {
      status: '失败',
      message: error instanceof Error ? error.message : '未知错误',
      data: null
    }
    Toast('获取就诊人详情失败')
  } finally {
    testingPatientDetail.value = false
  }
}

// 测试添加就诊人
const testAddPatient = async () => {
  testingAdd.value = true
  addResult.value = null
  
  try {
    const response = await api.addPatient(testForm)
    addResult.value = {
      status: '成功',
      message: '添加就诊人成功',
      data: response.data
    }
    Toast('添加就诊人成功')
  } catch (error) {
    console.error('添加就诊人失败:', error)
    addResult.value = {
      status: '失败',
      message: error instanceof Error ? error.message : '未知错误',
      data: null
    }
    Toast('添加就诊人失败')
  } finally {
    testingAdd.value = false
  }
}
</script>

<style scoped>
.patient-test-page {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.test-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
}

.test-section h3 {
  margin-top: 0;
  color: #1989fa;
}

.result {
  margin-top: 15px;
  padding: 15px;
  background: #f7f8fa;
  border-radius: 4px;
}

.result pre {
  background: #fff;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 12px;
}
</style>

